<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>7.3节,滑动门导航</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="../../extend/animateManage.js"></script>
</head>
<style>
    a{
        text-decoration:none;
    }
    /**=================滑动门导航========================**/
    #slide{
        position: relative;
        left: -72px;
        display: block;
        border: 1px #ccc solid;
        height: 82px;
        width: 100px;
    }
    #slide div{
        position: relative;
        float: left;
        margin-top: 5px;
        margin-left: 5px;
    }

    .slideMain div{
        clear: both;
    }
    .slideMain,.slideTab{
        height: 80px;
    }
    .slideTab{
        line-height: 74px;
    }
</style>
<body>
    <h2>滑动门导航</h2>
    <div id='slide'>
        <!--菜单主体-->
        <div class="slideMain" id='slideMain'>
            <div><a href="http://www.qingjs.com">菜单1</a></div>
            <div><a href="http://www.qingjs.com">菜单1</a></div>
            <div><a href="http://www.qingjs.com">菜单1</a></div>
        </div>

        <!--引导卡-->
        <div class="slideTab" title='显示菜单' id='slideTab'>
            &nbsp;》》
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
<script type="text/javascript">
    window.onload = function(){
        function slideNavs(slide){//    滑动门导航===========================start
            var slideId = -1;;
            slide.onmouseover = function(){//打开滑动门
                clearTimeout(slideId);//由于子元素会干扰事件，导致滑动抖动，当再次进入元素，停止隐藏滑动门的线程
                new animateManage({//播放显示元素的动画
                    "context" : slide,//被操作的元素
                    "effect":"linear",
                    "time": 100,//持续时间
                    "starCss":{//元素的起始值偏移量
                        "left":slide.style.left
                    },
                    "css" :{//元素的结束值偏移量
                        "left":0
                    }
                }).init();
            }

            slide.onmouseout = function(){//关闭滑动门
                slideId = setTimeout(function(){
                    new animateManage({//播放隐藏元素的动画
                        "context" : slide,//被操作的元素
                        "effect":"linear",
                        "time": 100,//持续时间
                        "starCss":{//元素的起始值偏移量
                            "left":slide.style.left
                        },
                        "css" :{//元素的结束值偏移量s
                            "left":-72
                        }
                    }).init();
                }, 300)

            }
        }
        slideNavs(document.getElementById("slide"));
    };
</script>
<!--以下为距离代码，方便测试-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>